<template>
  <div>
    <el-form v-if="" :inline="true" :model="ecardDetails" ref="ecardDetails">
  <a-descriptions title="名片信息" bordered>
    <a-descriptions-item label="姓名">
      <el-input v-model="ecardDetails.ename"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="照片">
      <el-upload
          class="avatar-uploader"
          action="/ecard/uploadimg"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
        <img v-if="ecardDetails.eimg" :src="ecardDetails.eimg"  class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </a-descriptions-item>
    <a-descriptions-item label="性别">
      <el-input v-model="ecardDetails.egender"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="年龄">
      <el-input v-model="ecardDetails.eage"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="事务所">
      <el-select v-model="ecardDetails.ecollege" clearable placeholder="请选择" style="width:100%">
        <el-option v-for="(item,index) in categorys" :key="item.id" :label=item.college :value=item.college></el-option>
      </el-select>
    </a-descriptions-item>
    <a-descriptions-item label="民族">
      <el-input v-model="ecardDetails.enation"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="E-mail邮箱">
      <el-input v-model="ecardDetails.email"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="籍贯">
      <el-input v-model="ecardDetails.enative"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="职称">
      <el-input v-model="ecardDetails.eprofessionalTitle"></el-input>
    </a-descriptions-item>
    <a-descriptions-item label="联系地址">
      <el-input v-model="ecardDetails.eteachOffice"></el-input>
    </a-descriptions-item>

  </a-descriptions>

      <el-collapse accordion style="margin-bottom: 20px">
        <el-collapse-item>
          <template slot="title">
            <span style="font-size: 16px"><b>其他信息</b></span><i class="header-icon el-icon-caret-bottom"></i>
          </template>
      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px"><b>个人荣誉</b></span>

          <el-button style="float: right; padding: 3px 0" type="text" @click="addaward">新增</el-button>
        </div>
        <div class="text item" style="text-align:center;">
          <el-form-item
              v-for="(award, index) in ecardDetails.awards"
              :key="award.key"
              :prop="'awards.' + index + '.awardsInfo'"
              :label="'荣誉' + (index+1)"
              :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
          >
              <el-input v-model="award.awardsInfo" style="width:800px; margin-right: 10px"></el-input>
              <el-button type="text" v-show="ecardDetails.awards.length >1" @click.prevent="removeaward(award)">
                <i class="el-icon-close"></i>
              </el-button>
          </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px"><b>教育经历</b></span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addeduBackground">新增</el-button>
        </div>
        <div class="text item" style="text-align:center;">
          <el-form-item
              v-for="(eduBackground, index) in ecardDetails.eduBackgrounds"
              :key="eduBackground.key"
              :prop="'eduBackgrounds.' + index + '.eduBackgroundInfo'"
              :label="'教育经历' + (index+1)"

              :rules="{
      required: true, message: '教育经历不能为空', trigger: 'blur'
    }"
          >
            <el-input v-model="eduBackground.eduBackgroundInfo" style="width:800px;margin-right: 10px"></el-input>

              <el-button type="text"  v-show="ecardDetails.eduBackgrounds.length >1" @click.prevent="removeeduBackground(eduBackground)">
                <i class="el-icon-close"></i>
              </el-button>

          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px"><b>工作经历</b></span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addwork">新增</el-button>
        </div>
        <div class="text item" style="text-align:center;">
          <el-form-item
              v-for="(work, index) in ecardDetails.works"
              :key="work.key"
              :prop="'works.' + index + '.workInfo'"
              :label="'工作经历' + (index+1)"

              :rules="{
      required: true, message: '工作经历不能为空', trigger: 'blur'
    }"
          >
            <el-input v-model="work.workInfo" style="width:800px;margin-right: 10px"></el-input>

              <el-button type="text" v-show="ecardDetails.works.length >1" @click.prevent="removework(work)">
                <i class="el-icon-close"></i>
              </el-button>

          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px"><b>咨询方向</b></span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addstudyDirection">新增</el-button>
        </div>
        <div class="text item" style="text-align:center;">
          <el-form-item
              v-for="(studyDirection, index) in ecardDetails.studyDirections"
              :key="studyDirection.key"
              :prop="'studyDirections.' + index + '.directionInfo'"
              :label="'咨询方向' + (index+1)"

              :rules="{
      required: true, message: '咨询方向不能为空', trigger: 'blur'
    }"
          >
            <el-input v-model="studyDirection.directionInfo" style="width:800px;margin-right: 10px"></el-input>
              <el-button type="text" v-show="ecardDetails.studyDirections.length >1" @click.prevent="removestudyDirection(studyDirection)">
                <i class="el-icon-close"></i>
              </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px"><b>咨询课程</b></span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addteachCource">新增</el-button>
        </div>
        <div class="text item" style="text-align:center;">
          <el-form-item
              v-for="(teachCource, index) in ecardDetails.teachCources"
              :key="teachCource.key"
              :prop="'teachCources.' + index + '.courceInfo'"
              :label="'咨询课程' + (index+1)"

              :rules="{
      required: true, message: '课程不能为空', trigger: 'blur'
    }"
          >
            <el-input v-model="teachCource.courceInfo" style="width:800px;margin-right: 10px"></el-input>
              <el-button type="text" v-show="ecardDetails.teachCources.length >1" @click.prevent="removeteachCource(teachCource)">
                <i class="el-icon-close"></i>
              </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px"><b>学术论文</b></span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addpaper">新增</el-button>
        </div>
        <div class="text item" style="text-align:center;">
          <el-form-item
              v-for="(paper, index) in ecardDetails.papers"
              :key="paper.key"
              :prop="'papers.' + index + '.info'"
              :label="'论文' + (index+1)"

              :rules="{
      required: true, message: '论文不能为空', trigger: 'blur'
    }"
          >
            <el-input v-model="paper.info" style="width:800px;margin-right: 10px"></el-input>
              <el-button type="text" v-show="ecardDetails.papers.length >1" @click.prevent="removepaper(paper)">
                <i class="el-icon-close"></i>
              </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px">
            <div slot="header" class="clearfix">
              <span style="font-size: 16px"><b>媒体库</b></span>
            </div>
            <div class="text item" style="text-align:center;">
                <el-upload
                    class="upload-demo"
                    drag
                    action="/ecard/uploadimg"
                    multiple
                    :on-success="handleSuccess"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="ecardDetails.medias">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </div>
          </el-card>

        </el-collapse-item>
      </el-collapse>




      <el-form-item  style="display: flex;justify-content:center">
        <el-button type="primary" @click="Onsubmit(ecardDetails)">提交</el-button>
        <el-button @click="resetForm(ecardDetails)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import {queryecardDetail,updateMycard} from "@/api/vcard";
export default {
  inject: ['reload'],
  name: "EditCard",
  data() {
    return {
      categorys:null,
      ecardDetails:{
        ename:"",
        egender:"",
        eage:"",
        eimg:"",
        ecollege:"",
        enation:"",
        email:"",
        enative:"",
        eteachOffice:"",
        eprofessionalTitle:"",
        awards:[
          {
            awardsInfo: "",
          },
        ],
        eduBackgrounds:[{
          eduBackgroundInfo: "",
        }],
        works: [{
            workInfo: "",
          }],
        papers: [{
            info: "",
          }],
        studyDirections: [{
            directionInfo: "",
          }],
        teachCources: [{
            courceInfo: "",
          }],
        medias:[],
      }
    };
  },
  created() {
    this.categorys=JSON.parse(sessionStorage.getItem("categorys"))
    if(this.$route.query.eid) {
      queryecardDetail(this.$route.query.eid).then(resp => {
        this.ecardDetails = resp.result
        console.log(this.ecardDetails)
      })
    }
  },
  methods: {
    handlePreview(file){
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
      console.log(file)
    },
    handleRemove(file,fileList){
      console.log(fileList);
      var list=[];
      fileList.forEach(item => {
        /* console.log(item);
         console.log(item.response.message);*/
        list.push({
          name:item.name,
          url:item.url
        })
      })
      this.ecardDetails.medias=list
      console.log(this.ecardDetails.medias);
    },
    handleSuccess(response,file,fileList){
      console.log(file);
      this.ecardDetails.medias.push({
          name:file.name,
          url:response.message
        })
    },
    handleAvatarSuccess(file) {
       this.ecardDetails.eimg = file.message;
      // console.log(file.message)
    },

    Onsubmit(formName){
        console.log(formName)
      updateMycard(formName).then(res=>{
        if (res.success) {
          // console.log(response.message);
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success'
          });
          this.reload()
        } else {
          this.$notify({
            title: '失败',
            message: res.message,
            type: 'error'
          });
        }
      })
    },
    removeaward(item) {
      var index = this.ecardDetails.awards.indexOf(item)
      if (index !== -1) {
        this.ecardDetails.awards.splice(index, 1)
      }
    },
    addaward() {
      this.ecardDetails.awards.push({
        awardsInfo: '',
        key: Date.now()
      });
    },


    removeeduBackground(item) {
      var index = this.ecardDetails.eduBackgrounds.indexOf(item)
      if (index !== -1) {
        this.ecardDetails.eduBackgrounds.splice(index, 1)
      }
    },
    addeduBackground() {
      this.ecardDetails.eduBackgrounds.push({
        eduBackgroundInfo: '',
        key: Date.now()
      });
    },


    removestudyDirection(item) {
      var index = this.ecardDetails.studyDirections.indexOf(item)
      if (index !== -1) {
        this.ecardDetails.studyDirections.splice(index, 1)
      }
    },
    addstudyDirection() {
      this.ecardDetails.studyDirections.push({
        directionInfo: '',
        key: Date.now()
      });
    },
    removework(item) {
      var index = this.ecardDetails.works.indexOf(item)
      if (index !== -1) {
        this.ecardDetails.works.splice(index, 1)
      }
    },
    addwork() {
      this.ecardDetails.works.push({
        workInfo: '',
        key: Date.now()
      });
    },

    removeteachCource(item) {
      var index = this.ecardDetails.teachCources.indexOf(item)
      if (index !== -1) {
        this.ecardDetails.teachCources.splice(index, 1)
      }
    },
    addteachCource() {
      this.ecardDetails.teachCources.push({
        courceInfo: '',
        key: Date.now()
      });
    },

    removepaper(item) {
      var index = this.ecardDetails.papers.indexOf(item)
      if (index !== -1) {
        this.ecardDetails.papers.splice(index, 1)
      }
    },
    addpaper() {
      this.ecardDetails.papers.push({
        info: '',
        key: Date.now()
      });
    },



  },
}
</script>

<style scoped>
.line{
  float: right;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 40px;
  height: 50px;
  display: block;
  margin-left: 100px;
}
</style>